<template>
	<view style="width: 100%;overflow-x: hidden;">
		<block v-if="is_register==1">
			<view class="wel">
				您好，
			</view>
			<view class="wel_btm">
				欢迎登录峥上科技
			</view>
			<view class="select_weibao" v-if="1==3">
				<xfl-select :list="list1" :clearable="false" :focusShowList="true" :showItemNum="5" :listShow="false"
					:isCanInput="false" :style_Container="'height: 50px; font-size: 16px;'" :placeholder="'请选择维保单位'"
					:selectHideType="'hideAll'">
				</xfl-select>

			</view>
			<view class="select_weibao" v-if="1==3">
				<xfl-select :list="list2" :clearable="false" :focusShowList="true" :showItemNum="5" :listShow="false"
					:isCanInput="false" :style_Container="'height: 50px; font-size: 16px;'" :placeholder="'请选择角色'"
					:selectHideType="'hideAll'">
				</xfl-select>
			</view>
			<view class="username">
				<input type="text" value="" placeholder="请输入手机号码" placeholder-style="font-size: 28rpx;color: #B6BDBD;"
					@input="login_phonenumber" />
			</view>
			<view class="username" style="margin-top: 60rpx;" v-if="!mailbox_login||setPassword">
				<input type="text" value="" placeholder="请输入验证码" placeholder-style="font-size: 28rpx;color: #B6BDBD;"
					@input="login_password" />
				<view class="code-time" @tap="getCode">
					{{codeTimer==0?'获取验证码':(codeTimer+'秒后重新获取')}}
				</view>
			</view>
			<view class="username" style="margin-top: 60rpx;">
				<input type="text" value="" :placeholder="setPassword?'请输入新密码':'请输入密码'"
					placeholder-style="font-size: 28rpx;color: #B6BDBD;" @input="login_password" />
			</view>
			<view class="username" style="margin-top: 60rpx;" v-if="setPassword">
				<input type="text" value="" placeholder="请确认新密码" placeholder-style="font-size: 28rpx;color: #B6BDBD;"
					@input="login_password" />
			</view>

			<view class="register">
				<block class="" v-if="setPassword">
					<view class="half" @tap="phoneLogin(1)">
						密码登录
					</view>
					<view class="half" @tap="phoneLogin(2)">
						验证码登录
					</view>
				</block>
				<block v-else>
					<view class="half" @tap="forgetPwd" >
						忘记密码
					</view>
					<view class="half" @tap="phoneLogin(0)">
						{{mailbox_login?'验证码登录':"密码登录"}}
					</view>
					</block>

			</view>
			<view class="btn_login" @click="tologin" style="margin-top: 100rpx;">
				登录
			</view>
			<view class="btn_login" @click="change_register">
				注册
			</view>

		</block>
		<block v-else-if="is_register==2">
			<view class="wel_1" style="margin-bottom: 78rpx;">
				注册，
			</view>
			<view class="username op">
				<input type="text" value="" placeholder="请输入手机号码" @input="register_phonenumber"
					placeholder-style="font-size: 28rpx;color: #B6BDBD;" />
			</view>
			<view class="username op">
				<input type="password" value="" placeholder="请输入密码" placeholder-style="font-size: 28rpx;color: #B6BDBD;"
					@input="register_password" />
			</view>
			<view class="username op">
				<input type="text" value="" placeholder="请输入单位名称" placeholder-style="font-size: 28rpx;color: #B6BDBD;"
					@input="register_deptName" />
			</view>
			<view class="username op">
				<input type="text" value="" placeholder="请输入单位地址" placeholder-style="font-size: 28rpx;color: #B6BDBD;"
					@input="register_deptAddress" />
			</view>
			<view class="username op" style="border-bottom: none;">
				<!-- <input type="text" value="" placeholder="请选择渠道商" placeholder-style="font-size: 28rpx;color: #B6BDBD;" /> -->
				<!-- 				<view style="width: 80%; margin: auto; margin-bottom: 20px;"> -->
				<xfl-select :list="Distributors" :clearable="false" :showItemNum="5" :listShow="false"
					:isCanInput="false" :focusShowList="true"
					:style_Container="'height: 120rpx; font-size: 13px;color:#B6BDBD;padding:0;'"
					:placeholder="'请选择渠道商'" :selectHideType="'hideAll'" @change="changeid">
				</xfl-select>
				<!-- </view> -->
			</view>
			</uDataSelect>
			<view class="up_files" @tap='upImage'>
				<view class="up_head">
					<view class="up_text">
						上传凭证
					</view>
					<view class="up_file">
						选择文件
					</view>
				</view>
				<!-- <image style="position: relative;left: 48%;top: 20%;" v-if="imgList==''"
					src="../../static/image/regster.png" mode=""></image>
				<text style="position: absolute;left: 42%;top: 50%;" v-if="imgList==''">上传凭证</text>
				<view class="d-flex flex-wrap" style="width: 100%;height: 100%;">
					<block v-for="(item,index) in imgList" :key="index">
						<image style="height: 100%;%" class="flex-1" v-if="imgList!=''" :src="item" mode=" scaleToFill">
						</image>
					</block>
					
				</view> -->
			</view>
			<view class="">
				<img :src="item" alt="" v-for="(item,index) in imgList" :key="index">
			</view>
			<view class="btn_login" @tap="btn_Submit">
				提交
			</view>
		</block>
		<block v-else>
			<view style="margin: auto;	width: 420rpx;">
				<image class="up_success" src="../../static/image/shenhe.png" mode=""></image>
			</view>
			<view class="success_title">
				提交成功
			</view>
			<view class="success_await">
				请等待审核中
			</view>
			<view class="success_btn d-flex j-center a-center" @click="toindex">
				<view class="success_btn_text main-bg-color">
					下一步
				</view>
			</view>
		</block>
	</view>

</template>
<script>
	import xflSelect from '../../components/xfl-select/xfl-select.vue'; //导入
	export default {
		components: {
			xflSelect
		},
		data() {
			return {
				setPassword:false,
				mailbox_login: true,
				list2: ['管理员', '巡检员'],
				value: 0,
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				//保存上传凭证图片地址
				imgList: [],
				is_register: 1,
				// 用户数据
				user_list: [],
				//渠道商完整数据
				Distributors_list: [],
				//渠道商名称
				Distributors: [],
				user_data: {
					//用户名//就是手机号
					username: '',
					//密码
					password: '',
					//手机号
					phonenumber: '',
					//单位名称
					deptName: '',
					//渠道商id
					parentId: '',
					//凭证图片
					credentials: '',
					//单位位置
					deptAddress: ''
				},
				//登录手机号和密码
				login_data: {
					//注册手机号
					phonenumber: '',
					//注册密码
					password: ''
				},
				codeTimer: 0, //验证码倒计时

			}
		},
		onLoad() {
			//获取渠道商
			this.getlistDistributors()
		},
		methods: {
			//获取验证码
			getCode() {
			
				if (this.codeTimer == 0) {
					this.codeTimer = 5
					let timer = setInterval(() => {
						this.codeTimer = this.codeTimer - 1
						if (this.codeTimer == 0) clearInterval(timer)
					}, 1000)
				}
			},
			forgetPwd() {
				this.setPassword = true
			},
			phoneLogin(e) {
				this.setPassword = false
				if (e == 0) {
					this.mailbox_login = !this.mailbox_login
				} else if (e == 1) {
					this.mailbox_login = true
				} else if (e == 2) {
					this.mailbox_login = false
				}
			},
			//登录账号
			login_phonenumber(e) {
				this.login_data.phonenumber = e.detail.value
			},
			//登录密码
			login_password(e) {
				this.login_data.password = e.detail.value
			},
			//获取渠道商
			getlistDistributors() {
				this.$https.get("listDistributors", {}).then(res => {
					this.Distributors_list = res.data
					console.log(this.Distributors_list, 'this.Distributors_list');
					res.data.forEach(item => {
						this.Distributors.push(item.deptName)
					})
				})
			},
			//获取选择渠道商id
			changeid(e) {
				this.Distributors_list.forEach((item, index) => {
					if (index == e.index) {
						this.user_data.parentId = item.deptId
					}
				})
			},
			//获取注册手机
			register_phonenumber(e) {
				// this.user_data.username = e.detail.value
				this.user_data.phonenumber = e.detail.value
			},
			//获取注册密码
			register_password(e) {
				this.user_data.password = e.detail.value
			},
			//获取注册单位名称
			register_deptName(e) {
				this.user_data.deptName = e.detail.value
			},
			//注册单位位置
			register_deptAddress(e) {
				this.user_data.deptAddress = e.detail.value
			},
			/* 跳转注册页面 */
			change_register() {
				this.is_register = 2
			},
			//上传图片  反回在线地址
			upImage() {
				let arr = []
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res.tempFilePaths, 'res.tempFilePathsp');
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
						console.log(this.imgList, 'this.imgList');
						this.imgList.forEach((item, index) => {
							console.log(item, 'item');
							uni.uploadFile({
								// url: 'http://cvixvb.natappfree.cc/fileUpload',
								url: 'https://xf.westts.cn/fileUpload',
								filePath: item,
								name: 'files',
								// formData: {
								// 	files: res.tempFilePaths[0]
								// },
								success: (res) => {
									let credentials = JSON.parse(res.data)
									console.log(credentials.msg, 'credentials.msg');
									arr.push(credentials.msg)
									// this.user_data.credentials.push(credentials.msg)

								}
							});
						})
						this.user_data.credentials = arr
					}
				});
			},
			/* 注册提交 */
			btn_Submit() {
				var phone = this.user_data.phonenumber
				var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
				if (strTemp.test(phone) && this.user_data.password != '' && this.user_data.deptAddress != '' && this
					.user_data.phonenumber != '' && this.user_data.deptName != '' && this.user_data.parentId != '') {
					console.log('手机验证通过');
					let a = this.user_data.credentials.toString()
					console.log(a, 7897);
					this.$https.post("miniappMaintainRegister", {
						deptAddress: this.user_data.deptAddress,
						password: this.user_data.password,
						phonenumber: this.user_data.phonenumber,
						deptName: this.user_data.deptName,
						parentId: this.user_data.parentId,
						credentials: a
					}).then(res => {
						console.log(res.code, 'res.code');
						if (res.code == 200) {
							this.is_register = 3
						} else {
							uni.showModal({
								content: res.msg,
								showCancel: false
							})
						}
						console.log(res, 'res111');

					})
					console.log(this.user_data, 'user_data');
				} else if (this.user_data.phonenumber == '') {
					uni.showToast({
						title: "请输入手机号",
						icon: 'error'
					})
				} else if (this.user_data.password == '') {
					uni.showToast({
						title: "请输入密码",
						icon: 'error'
					})
				} else if (!strTemp.test(phone)) {
					uni.showToast({
						title: "请输入正确手机",
						icon: 'error'
					})
				} else if (this.user_data.deptName == '') {
					uni.showToast({
						title: "请输入单位名称",
						icon: 'error'
					})
				} else if (this.user_data.deptAddress == '') {
					uni.showToast({
						title: "请选择单位地址",
						icon: 'error'
					})
				} else if (this.user_data.parentId == '') {
					uni.showToast({
						title: "请选择渠道商",
						icon: 'error'
					})
				}
			},
			// 登录成功跳转
			tologin() {
				var phone = this.login_data.phonenumber
				var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
				if (strTemp.test(phone) && this.login_data.password != '') {
					console.log('手机验证通过');
					this.$https.post('miniappLogin', {
						phonenumber: this.login_data.phonenumber,
						password: this.login_data.password
					}).then(res => {
						if (res.code == 200) {
							uni.setStorageSync("token", res.token)
							uni.showToast({
								title: '登录成功',
							})
							setTimeout(() => {
								uni.switchTab({
									url: '../index/index'
								})
							}, 1500)
						} else {
							uni.showToast({
								title: '账号密码错误',
								icon: 'none'
							})
						}
					})
					console.log(this.login_data, 'this.login_data');
				} else if (this.login_data.phonenumber == '') {
					uni.showToast({
						title: "请输入手机号",
						icon: 'error'
					})
				} else if (this.login_data.password == '') {
					uni.showToast({
						title: "请输入密码",
						icon: 'error'
					})
				} else if (!strTemp.test(phone)) {
					uni.showToast({
						title: "请输入正确手机",
						icon: 'error'
					})
				}
			},
			//注册成功 等待审核 点击下一步跳转其他页面 
			toindex() {
				this.is_register = 1
			}
		}
	}
</script>
<style lang="scss" scoped>
	.up_head {
		display: flex;
	}

	.up_file {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #7F8084;
		line-height: 40rpx;
		border-radius: 10rpx;
		border: 2rpx solid #7F8084;
	}

	.up_text {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4252CD;
		line-height: 40rpx;
		margin-right: 20rpx;
	}

	.select_weibao {
		height: 120rpx;
		padding: 0 30rpx;
	}

	.success_title {
		width: 166rpx;
		height: 56rpx;
		font-size: 40rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #4252CD;
		margin: auto;
		text-align: center;
	}

	.success_await {
		text-align: center;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #7F8084;
		line-height: 40rpx;
		width: 176rpx;
		height: 40rpx;
		margin: 20rpx auto;
	}

	.up_success {
		display: inline-block;
		width: 420rpx;
		height: 440rpx;
		margin: 290rpx auto 42rpx;
	}

	.up_files {
		padding: 0 30rpx;

	}

	.btn_login {
		width: 690rpx;
		height: 92rpx;
		background: #4252CD;
		border-radius: 46rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 92rpx;
		text-align: center;
		margin: 40rpx auto;
	}

	.register {
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #4252CD;
		margin-top: 20rpx;
		position: relative;

	}

	.wel {
		font-size: 64rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		padding: 180rpx 0 0 30rpx;
	}

	.wel_1 {
		font-size: 64rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		padding: 40rpx 0 0 30rpx;
	}
.code-time {
		position: absolute;
		height: 52rpx;
		padding: 0 16rpx;
		right: 0rpx;
		top: 30rpx;
		margin-top: -17rpx;
		background: #4053CD;
		border-radius: 26rpx;
		opacity: 0.59;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 52rpx;
		z-index: 99;
	}

	.wel_btm {
		font-size: 28rpx;
		color: #747474;
		margin-left: 30rpx;
		margin-top: 23rpx;
		margin-bottom: 80rpx;
	}

	.op {
		margin-bottom: 58rpx;
		padding-bottom: 40rpx !important;
	}

	.username {
		margin-left: 30rpx;
		width: 690rpx;
		border-bottom: 2rpx solid #EFEFEF;
		padding-bottom: 40rpx;
		position: relative;
	}

	.success_btn {
		padding-top: 320rpx;
	}

	.success_btn_text {
		width: 690rpx;
		text-align: center;
		height: 92rpx;
		line-height: 92rpx;
		color: #fff;
		border-radius: 46rpx;
	}
</style>
